const $container = document.querySelector('div')
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, $container.clientWidth / $container.clientHeight, 0.1, 5000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize($container.clientWidth, $container.clientHeight);

$container.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(200, 200, 200);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
console.log(cube)
// cube.rotation.x += 2;
// cube.rotation.y += 2;
scene.add(cube);

camera.position.z = 1000;
// camera.lookAt( 0, 0, 0 );

// const line_material = new THREE.LineBasicMaterial( { color: 0xffffff } );
// const points = [];
// points.push( new THREE.Vector3( -5, 0, 0 ) );
// points.push( new THREE.Vector3( 0, 5, 0 ) );
// points.push( new THREE.Vector3( 5, 0, 0 ) );
// const line_geometry = new THREE.BufferGeometry().setFromPoints( points );
// const line = new THREE.Line( line_geometry, line_material );
// scene.add( line );

const loader = new THREE.OBJLoader()
loader.load(
    './model.obj',
    function (obj) {
        console.log(obj)
        // scene.add(obj)
        obj.children.slice(0,100).forEach(one => {
            const material = new THREE.MeshBasicMaterial({ color: 0xfffff10 });
            const converage=new THREE.Mesh(one.geometry, material)
            converage.rotation.x += 0
            converage.rotation.y += 2
            scene.add(converage)
            
        });
        // animate()
        renderer.render(scene, camera);
    },
    function () {
        console.log(1)
    },
    // called when loading has errors
    function (error) {
        console.log('An error happened',error);
    }
)

// const manager = new THREE.LoadingManager();
// const loader=new THREE.GLTFLoader(manager)
// manager.onLoad = function ( ) {
// 	console.log( 'Loading complete!');
// };
// loader.load(
//     'https://threejs.org/examples/models/gltf/LittlestTokyo.glb',
//     function(gltf){
//         scene.add(gltf.scene)
//         // animate()
//         renderer.render(scene, camera);
//     },
//     undefined,
// 	// called when loading has errors
// 	function ( error ) {
//         console.log(error)
// 		console.log( 'An error happened' );
// 	}
// )

// function animate() {
//     requestAnimationFrame(animate);
//     cube.rotation.x += 0.01;
//     cube.rotation.y += 0.01;
//     renderer.render(scene, camera);
// }
// animate();